.setting-content {
    font-size: 18px;
}
.setting-content .kmi-header-row .kmi-side-btn{
    position: relative;
    height: auto;
    width: auto;
    margin: 0 16px 0 0;
    top: 0;
}
.setting-content.kmi-layout-content{
    background: #eef1f7;
    /* padding-left: 16px; */
}
.mode-side .setting-content.kmi-layout-content{
    padding-left: 0px;
    /* font-size: 1.3rem; */
}
.setting-content .kmi-layout-main-content{
    background: linear-gradient(to right, #f7f7f7 50%,rgba(255, 255, 255, 0.51) 100%);
}
.setting-content .kmi-layout-main-content{
    display: flex;
}
.setting-content .setting-sidebar-left{
    display: flex;
    justify-content: space-between;
    padding: 0px;
    margin: 16px 0 16px 16px;
    overflow: auto;
    flex: 1;
}
.setting-content .setting-sidebar-left .option-wrapper{ 
    box-sizing: border-box;
    width: 100%;
    margin: 0 16px 0 0;
    padding: 2px 0 0 0;
}
.setting-content .split-line{ 
    width: 1px;
    background: #ececec;
    height: 34px;
}
.setting-content .ip:last-child .split-line{ 
    display: none;
}
.setting-content .setting-sidebar-left .vertical-border{ 
    height: initial;
    width: 1px;
    background: #ececec;
}
.setting-content .setting-sidebar-right{
    padding: 16px;
    width: auto;
}
.setting-content .setting-sidebar-right .kmi-button{
    padding: 0 16px;
    background: #fff;
    color: #000;
    border: 1px solid #ECECEC;
    border-radius: 4px;
    min-width: 150px;
    box-sizing: border-box;
}
.setting-content .setting-sidebar-right .kmi-button.icon{
    justify-content: flex-start;
}
.setting-content .setting-sidebar-right .kmi-button.confirm{
    background: #FFB037;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    width: 150px;
    box-sizing: border-box;
    color: #fff;
    border: none;
}

.setting-content .ver_text {
    background-color: white !important;
}

.text-fields-group1 .label>label:FIRST-CHILD{
    background-color : #66bc84;
}
.text-fields-group1 .label>.triangle{
    border-color: transparent transparent transparent #66bc84;
}
.text-fields-group2 .label>label:FIRST-CHILD{
    background-color : #66bc84;
}
.text-fields-group2 .label>.triangle{
    border-color: transparent transparent transparent #66bc84;
}
.text-fields-group3 .label>label:FIRST-CHILD{
    background-color : #e2b446;
}
.text-fields-group3 .label>.triangle{
    border-color: transparent transparent transparent #e2b446;
}
.setting-content .fields-ip > input{
    flex : 1;
    /*width: 150px;*/
}
.switch-ip{
    box-sizing: border-box;
    font-size: 20px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: row;
    height: 32px;
    align-items: center;
    position: relative;
    background-color : white;

    border-radius: 4px 4px 4px 4px;
}

.switch-ip .triangle{
    position:relative;
    left: 0 px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #1ab7cd transparent transparent transparent;
    border-width: 32px 0 0 36px;
}
.switch-ip .switch-ip__fixed{
    height: 32px;
    line-height: 32px;
    border-radius: 4px 0px 0px 4px;
    text-align: center;

}
.switch-ip .switch-ip__dhcp{
    height: 32px;
    line-height: 32px;
    border-radius: 0 4px 4px 0;
    text-align: center;
}
.switch-ip .is-selected{
    position:relative;
    background-color: #1ab7cd;
    color : white;
}
.setting-content .kmi-button{
    height: 50px;
    border-radius: 8px;
    margin: 0 0 16px 0;
}
.setting-content .kmi-button.module-version{
    min-width: 150px;
    height: 48px;
    padding: 0 16px;
    margin: 0;
    background: #fff;
    color: #000;
    border: 1px solid #ECECEC;
    border-radius: 4px;
}
.setting-content .kmi-button.module-version i{
    margin: 0 8px 0 0;
}
.setting-content .kmi-button.setting-right-btn.not-select{
    background: #ececec;
    color: #000000;
}
.setting-content .kmi-text-fields--triangle .input{
    align-items: center;
    flex: 2;
}
.setting-content .kmi-text-fields--triangle .input> input{
    font-size: 1.3rem;
}
.setting-content .kmi-text-fields--triangle .input> .tip{
    color: #b3b3b3;
    position: absolute;
    width: auto;
    right: 0px;
    margin: 0 16px 0 0;
    top: auto;
}
.setting-content .kmi-text-fields--triangle .input> .tip.search:hover > i{
    color: #9a9a9a;
    cursor: pointer;
}

.setting-content .kmi-text-fields--triangle .input .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #ececec;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.setting-content .horizon-line{
    background: #ffffff;
    height: 1px;
    margin: 20px 0px;
}

.setting-content .kmi-text-fields.printer{
    flex: 1;
    padding: 0 10px;
    height: auto;
    margin-bottom: 0;
}

.setting-content .kmi-text-fields.printer input{
    border-color:#fff;
}
.setting-content .kmi-text-fields .tip.search > i{
    border-left:none;
}
.setting-content .kmi-text-fields--triangle .label{
    flex: 1;
    background-color: #ECECEC;
}
.setting-content .kmi-text-fields--option .main label{
    flex: 1;
}
.setting-content .kmi-text-fields--option .main input{
    flex: 3;
}
.setting-content .kmi-text-fields--triangle .label>label:FIRST-CHILD{
    padding: 0 0 0 16px;
    background-color: #293F5D;
    width: 100%;
    height: 50px;
    text-align: left;
    line-height: 50px;
    font-size: 18px;
    border-radius: 4px 0 0 4px;
}
.setting-content .kmi-text-fields--triangle .triangle{
    display: none;
    border-color: transparent transparent transparent #293F5D;
    border-width: 50px 0 0 50px;
}
.setting-content .kmi-text-fields--triangle.text-fields-group3 .label{
    background-color: #ECECEC;
    color: black;
}
.setting-content .kmi-text-fields--triangle.text-fields-group3 .label>label:FIRST-CHILD{
    /* background-color: #e99ebc; */
    background-color: #ECECEC;
    color: black;
}
.setting-content .kmi-text-fields--triangle.text-fields-group3 .triangle{
    /* border-color: transparent transparent transparent #e99ebc; */
    border-color: transparent transparent transparent #ECECEC;
}
.setting-content .kmi-text-fields--triangle{
    height: 48px;
    margin: 16px 0 0 0;
    
    border: none;
    /* font-size: 1.3rem; */
}
.kmi-text-fields--triangle[disabled]{
    background: none;
}
.kmi-text-fields--triangle[disabled] .main{
    background: #dcdddd;
}
.setting-content .kmi-text-fields--triangle:first-child{
    margin: 0;
}
.setting-content .kmi-text-fields--triangle .main{
    display: flex;
    width: 100%;
    border: 1px solid #ECECEC;
    border-radius: 4px;
}
.setting-content .kmi-text-fields--triangle .unit{
    width: 50px;
    text-align: center;
    color: #8394AC;
}
.setting-content .kmi-text-fields--triangle>input{
    text-align: center;
}
.setting-content .kmi-checkbox{
    height: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 18px;
}
.setting-content .kmi-checkbox>img{
    margin-top: -4px;
    width: auto;
    height: auto;
    margin: 0 8px 0 0;
}
.setting-content .kmi-button.logout-btn{
    background: #fff;
    border: 1px solid #ececec;
    color: #000000;
}
.setting-content .kmi-button .icon{
    margin: 0 8px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
}
.setting-content .kmi-button .icon img{
    height: 24px;
    width: 24px;
}
.setting-content .toggle-component {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.setting-content .toggle-component .toggle {
    position: relative;
    width: 68px;
    height: 34px;
    margin: 0 0 0 8px;

    background: #ececec;
    border-radius: 100px;
    transition: all 300ms ease-in-out;
}
.setting-content .toggle-component .toggle .dot {
    position: absolute;
    width: 26px;
    height: 26px;
    left: 4px;
    top: 4px;

    background: #ffffff;
    border-radius: 100px;
    transition: all 300ms ease-in-out;
}
.setting-content .toggle-component.active .toggle {
    background: #2889fe;
}
.setting-content .toggle-component.active .toggle .dot {
    left: 38px;
    top: 4px;
}
.setting-content .toggle-component label {
    font-size: 18px;
    line-height: 38px;
}
.setting-content .kmi-text-fields--triangle .input .slider:hover {
    opacity: 1;
}